<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

</head>

<body>
  <div id="app">
    <h1>
      <pre>{{ o }}</pre>
      <pre>{{ list }}</pre>
    </h1>
    <button @click="add">点击</button>


    <h2 ref='h2'>{{ mes }}</h2>

  </div>
  <script>
    let vm = new Vue({
      data: {
        o: {
          name: '张三',
          age: 18
        },
        list: ['a', 'b', 'c'],
        mes: 'hello world !!!'
      },
      methods: {
        add() {
          // this.o.sex = '男'
          this.$set(this.o, 'sex', '男')
          this.list.push('d')

        }
      }
    })
    vm.$mount('#app');


    console.log(vm.$refs.h2.innerHTML);
    vm.mes = 'hello Vue !!!!'
    // 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法
    //  Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
    vm.$nextTick().then(() => {
      console.log(vm.$refs.h2.innerHTML);
    })

  </script>
</body>

</html>